<!--
  * 权限分类
  *
-->
<template>
    <a-tree
      v-if="!_.isEmpty(departmentTreeData)"
      class="tree"
      :treeData="departmentTreeData"
      autoExpandParent
      :fieldNames="{ title: 'title', key: 'id', value: 'id' }"
      style="width: 100%; overflow-y: auto"
      checkStrictly
      checkable
      @select="onSelect"
    />
    <div class="no-data" v-else>暂无数据</div>
  </template>
  <script setup lang="ts">
    import _ from 'lodash';
    import { searchApi } from '@/api/search/search-api';
    // ----------------------- 分类树的展示 ---------------------
    const props = defineProps({
      value: {
        type: Number,
        default: 0,
      }
    });
    const emit = defineEmits(['update:value']);
    // 分类树形数据
    const departmentTreeData = ref<any[]>([]);
  
    onMounted(() => {
      queryDepartmentTree();
    });
  
    // 查询分类列表并构建 分类树
    const queryDepartmentTree = async () => {
      const res = await searchApi.authList();
      const data = res.data;
      departmentTreeData.value = data;
      // console.log(departmentTreeData.value, '分类树')
    };
  
    // 选中分类
    const onSelect = (selectedKeys: any, info: any) => {
      emit('update:value', selectedKeys[0]);
    };
  
    // ----------------------- 以下是暴露的方法内容 ----------------------------
    defineExpose({
      queryDepartmentTree,
    });
  </script>
  <style scoped lang="less">
    //.tree {
    //  height: 618px;
    //  margin-top: 10px;
    //  overflow-x: hidden;
    //}
    //
    //.sort-flag-row {
    //  margin-top: 10px;
    //  margin-bottom: 10px;
    //}
    //
    //.sort-span {
    //  margin-left: 5px;
    //}
    //.no-data {
    //  margin: 10px;
    //}
  </style>
  